﻿@namespace IoTSharp.ClientApp.Pages.Form

<Form 
    LabelCol="new ColLayoutParam{ Span = 5 }"
    WrapperCol="new ColLayoutParam{ Span = 19 }"
    Layout="@FormLayout.Horizontal"
    Class="stepForm"
    Model="_model">
    <FormItem Label="付款账户">
        <Select
            TItem="string"
            TItemValue="string"
            Placeholder="test@example.com"
            @bind-Value="@context.PayAccount">
            <SelectOptions>
                <SelectOption TItem="string" TItemValue="string" Value="@("ant - design @alipay.com")" Label="ant-design@alipay.com" />
            </SelectOptions>
        </Select>
    </FormItem>
    <FormItem Label="收款账户">
        <InputGroup Compact Style="display: table">
            <Select
                TItem="string"
                TItemValue="string"
                DefaultValue="@("alipay")"
                Style="width: 100px;"
                @bind-Value="@context.ReceiverAccountType">
                <SelectOptions>
                    <SelectOption TItem="string" TItemValue="string" Value="@("alipay")" Label="支付宝"/>
                    <SelectOption TItem="string" TItemValue="string" Value="@("bank")" Label="银行账户"/>
                </SelectOptions>
            </Select>
            <Input Style="width: calc(100% - 100px);" Placeholder="test@example.com" @bind-Value="@context.ReceiverAccount" />
        </InputGroup>
    </FormItem>
    <FormItem Label="收款人姓名">
        <Input Placeholder="请输入收款人姓名" @bind-Value="@context.ReceiverName" />
    </FormItem>
    <FormItem Label="转账金额">
        <Input Placeholder="请输入转账金额" @bind-Value="@context.ReceiverName" />
    </FormItem>
    <FormItem
        WrapperCol="new ColLayoutParam {Xs = 24}">
        <Button Type="primary" OnClick="OnValidateForm">
            下一步
        </Button>
    </FormItem>
</Form>
<Divider Style="margin: 40px 0 24px 0;" />
<div class="desc">
    <h3>说明</h3>
    <h4>转账到支付宝账户</h4>
    <p>
        如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
    </p>
    <h4>转账到银行卡</h4>
    <p>
        如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
    </p>
</div>
